import React from 'react';
import ReactEcharts from 'echarts-for-react';

class MyEcharts extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            option:{
                title:{
                    textStyle:{
                        color: '#fff'
                    }
                },
                legend:{
                    textStyle:{
                        color: '#fff'
                    }
                },
                xAxis: [
                    {
                        axisLine: {
                            lineStyle: {
                                color: "#fff",
                            }
                        }            
                    }
                ],
                yAxis: [
                    {
                        axisLine: {
                            lineStyle: {
                                color: "#fff",
                            }
                        }            
                    }
                ]
            }
        }
    }
    componentDidMount(){
        //这里要先设置props中的option，再设置state中的option，否则会报错。
        const instance=this.echartsReact.getEchartsInstance();
        instance.setOption(this.state.option);
    }
    render() {
        return (
            <ReactEcharts ref={e => { this.echartsReact = e; }} option={this.props.option} style={{ height: "100%", width: "100%" }} opts={{ renderer: 'svg' }} />
        );
    }
}

export default MyEcharts;

